<template name="regionPicker">
	<view class="width-m" style="line-height:1;" :class="isLeft?'text-right':''">
	    <picker mode="multiSelector" 
			:range="range" :value="dataValue" :disabled="dataDisabled"
			@change="region_change" @columnchange="region_change_col" @cancel="region_cancel"
			>
			<view class="flex-center" style="align-items: center;" :class="isLeft?'flex-end':'flex-start'">
				<view :class="label==='请选择'?'base-colorgay':'base-color'">{{label}}</view>
				<image v-if="showImg" class="arrow" src="../../static/img/selectIcon.png" mode=""></image>	
			</view>
		</picker>
	</view>
</template>
<script>
import {provinceData,shanghaiData} from '../../common/pcityData.js'
export default {
	name: "regionPicker",
	props: {
		value:{ type: [Array,String], default(){ return [0,0,0] }},
		disabled:{ type: Boolean, default: false },
		isLeft:{ type: Boolean, default: true },
		showImg:{ type:Boolean,default:true},
		shanghai:{ type:Boolean,default:false},
	},
	data(){
		return {
			dataValue:[],
			dataDisabled:false,
			range:[],
			zones_tree:[],
		}
	},
	created:function(e){
		this.zones_tree = this.shanghai?shanghaiData:provinceData
		this.dataDisabled=this.disabled;
		this.value_format();
		this.range_set();
	},
	methods: {
		value_format(){
			var value=this.value;
			if(typeof(value)=='string' && value.indexOf(',')>0){
				value=value.split(',');
			}
			var sk=0,ck=0,zk=0;
			if(typeof(value)=='string'){
				this.zones_tree.forEach((sv,si)=>{
					sv.children.forEach((cv,ci)=>{
						cv.children.forEach((zv,zi)=>{
							if(zv.id==value){
								sk=si;
								ck=ci;
								zk=zi;
							}
						})
					})
				})
				this.dataValue=[sk,ck,zk];
			}else if(typeof(value[0])=='string' || value[0]>999){
				this.zones_tree.forEach((sv,si)=>{
					if(sv.id==value[0]){
						sk=si;
						sv.children.forEach((cv,ci)=>{
							if(cv.id==value[1]){
								ck=ci;
								cv.children.forEach((zv,zi)=>{
									if(zv.id==value[2]){
										zk=zi;
									}
								})
							}
						})
					}
				})
				this.dataValue=[sk,ck,zk];
			}else{
				this.dataValue=value;
			}
		},
		range_set() {
			var zones_ary=[[],[],[]];
			this.zones_tree.forEach((sv,si)=>{
				zones_ary[0].push(sv.name);
				if(si==this.dataValue[0]){
					sv.children.forEach((cv,ci)=>{
						zones_ary[1].push(cv.name);
						if(ci==this.dataValue[1]){
							cv.children.forEach((zv,zi)=>{
								zones_ary[2].push(zv.name);
							})
						}
					})
				}
			})
			this.range=zones_ary;
		},
		region_change(e){
			var v=e.detail.value;
			var value='',id=[]
			var sv=this.zones_tree[v[0]]
			id.push(sv.id)
			var cv=sv.children[v[1]];
			id.push(cv.id)
			var zv=cv.children[v[2]];
			value = sv.name+'-'+cv.name+'-'+zv.name
			id.push(zv.id)
			e.detail={id:id,value:value}
			this.$emit('change',e.detail)
			this.$emit('input',id)
		},
		region_change_col(e){
			this.dataValue[e.detail.column]=e.detail.value
			this.range_set();
			this.$emit('columnchange',e)
		},
		region_cancel(e){
			this.$emit('cancel',e)
		},
	},
	computed:{
		label(){
			if(this.value && this.value.length === 3){
				try {
					var v=this.value;
				var value='',id=[]
				var sv=this.zones_tree.find(ele => ele.id === v[0])
				id.push(sv.id)
				var cv=sv.children.find(ele => ele.id === v[1]);
				id.push(cv.id)
				var zv=cv.children.find(ele => ele.id === v[2]);
				value = sv.name+'-'+cv.name+'-'+zv.name
				id.push(zv.id)
				return value;
				} catch (error) {
					return "请选择"
				}
			}else {
				return '请选择'
			}
		}
	}
}
</script>
<style scoped>
	uni-picker{width: 100%;height: 100%;}
	.arrow{
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
</style>
